<template>
	<div class="basic_wrap">
		<bsHeader title="" @backurl="$router.back()"></bsHeader>
		<div class="contract_wrap">
			<div class="contract_title">
				<div class="title">{{ $t('contract.contract') }}</div>
				<div class="">
					<div>
						<div>{{ $t('contract.cno') }}{{ invest.contract_no }}</div>
						<div>{{ $t('contract.time') }}{{ invest.time_actual }}</div>
					</div>
				</div>
			</div>
			<div class="contract_part_name">
				<div>{{ $t('contract.parta') }}<strong>{{ contract.company }}</strong></div>
				<div>{{ $t('contract.partb') }}<strong>{{ invest.username }}</strong></div>
				<div>{{ $t('contract.partc') }}<strong>{{ contract.agencies }}</strong></div>
			</div>
			<div class="table-box">
				<table>
					<thead>
						<th class="th-col">{{ $t('contract.table_title') }}</th>
						<th class="th-col">{{ $t('contract.table_amount') }}</th>
						<th class="th-col">{{ $t('contract.table_cycle') }}</th>
						<th class="th-col">{{ invest.type == 1 ? $t('contract.table_dailyRate') : $t('contract.table_rate')
						}}</th>
						<th class="th-col">{{ $t('contract.table_income') }}</th>
					</thead>
					<tbody>
						<td class="tb-col">{{ invest.title }}</td>
						<td class="tb-col">{{ precision(invest.money2) + ' ' + invest.currency }}</td>
						<td class="tb-col">{{ invest.day + (invest.type == 3 ? $t('contract.hour') : $t('contract.day'))
						}}</td>
						<td class="tb-col">{{ invest.rate }}%</td>
						<td class="tb-col">{{ precision(invest.total_interest) + ' ' + invest.currency }}</td>
					</tbody>
				</table>
			</div>
			<div class="contract_detail">
				<div class="contract_ol">
					<div class="content" v-html="contract.content">
					</div>
				</div>
				<div class="stamp">
					<div>
						<div class="stamp-text">
							{{ $t('contract.parta') }}<strong>{{ contract.company }}</strong>
						</div>
						<div class="stamp-text">
							{{ $t('contract.parta') }}<strong>{{ invest.username }}</strong>
						</div>
						<div class="stamp-text">
							{{ $t('contract.partc') }}<strong>{{ contract.agencies }}</strong>
						</div>
						<div class="stamp-text">
							{{ $t('contract.time') }}<strong>{{ invest.time_actual }}</strong>
						</div>
					</div>
					<div>
						<div class="stamp-img">
							<img :src="contract.logo" alt="">
						</div>
						<div class="stamp-img">
							<img :src="contractLogo" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import bsHeader from '../../components/bsHeader.vue'
import Fetch from '../../utils/fetch'
export default {
	name: "investContract",
	components: {
		bsHeader
	},
	data() {
		return {
			data: [],
			contract: {},
			contractLogo: require('../img/common/contractLogo.png'),
			invest: {
				type: 1
			}
		};
	},
	created() {
		this.$parent.footer('user', false);
	},
	mounted() {
		this.start();
	},
	methods: {
		precision(money) {
			var precision = localStorage.getItem('precision');
			return (money / 1).toFixed(precision);
		},
		start() {
			Fetch('/user/getContract', {
				id: this.$route.query.id
			}).then(r => {
				this.contract = r.data.contract;
				this.invest = r.data.invest;
			})
		}
	}
};
</script>

<style lang="less" scoped>
.table-box {
	// overflow: auto;
	table{
		width: 100%;
	}
	thead {

		.th-col {
			background: #004269;
			text-align: center;
			border: 1px solid #b2b2b2;
			color: #FFFFFF;
			padding: 10px;
		}
	}

	tbody {

		.tb-col {
			text-align: center;
			border: 1px solid #b2b2b2;
			padding: 10px;
		}
	}

}

.width50 {
	width: 50%;
}

.basic_wrap {
	background: #FFFFFF;

	.square {
		border-left: 10px solid #000;
		padding-left: 8px;
		display: inline-block;
		height: 10px;
	}
}

.contract_wrap {
	line-height: 2;
	margin: 64px 5% 0 5%;

	.contract_title {
		margin-bottom: 10px;

		.title {
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.time {
			justify-content: space-between;
		}
	}

	.contract_part_name {
		margin-bottom: 10px;
	}
	.title-bg{
		background-color: #004269;
		width: 80%;
		padding: 3px 10px;
		color: #FFFFFF;
		box-sizing: border-box;
	}

	.contract_detail {
		margin-bottom: 10px;

		.contract_ol {
			margin-top: 10px;
		}

		ol {
			padding-left: 13px;
			list-style: auto;
		}
		.stamp{
			display: flex;
			.stamp-text{
				padding-top: 20px;
			}
			.stamp-img{
				width: 100px;
				height: 100px;
				img {
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
			}
		}
	}
}</style>